/**
 * Layui 富文本展开收起组件
 * 使用说明：
 * 1. 引入 layui.js 和本组件
 * 2. HTML 结构参考示例
 * 3. 调用 init() 方法初始化
 */

layui.define(['jquery'], function(exports) {
    "use strict";
    
    var $ = layui.$;
    
    var RichTextToggle = {
        /**
         * 初始化组件
         * @param {string} selector - 容器选择器
         * @param {object} options - 配置选项
         */
        init: function(selector, options) {
            var defaults = {
                maxLines: 5,                  // 最大显示行数
                lineHeight: '1.8rem',          // 行高（em）
                expandText: '展开更多',         // 展开按钮文字
                collapseText: '收起全文',       // 收起按钮文字
                expandIcon: 'layui-icon-down', // 展开图标
                collapseIcon: 'layui-icon-up', // 收起图标
                animate: true,                 // 是否启用动画
                duration: 300,                 // 动画时长(ms)
                showMask: true,                // 是否显示渐变遮罩
                autoCheck: true,               // 是否自动检查内容高度
                onExpand: null,                // 展开回调
                onCollapse: null               // 收起回调
            };
            
            var config = $.extend({}, defaults, options);
            
            $(selector).each(function() {
                var $container = $(this);
                
                // 如果已经初始化过，跳过
                if ($container.data('rich-text-inited')) {
                    return;
                }
                
                // 确保容器有必要的类
                $container.addClass('rich-text-container');
                
                // 查找或创建内容区域
                var $content = $container.find('.rich-text-content');
                if ($content.length === 0) {
                    $content = $container.wrapInner('<div class="rich-text-content"></div>').find('.rich-text-content');
                }
                
                // 创建渐变遮罩
                var $fadeMask = $container.find('.fade-mask');
                if ($fadeMask.length === 0 && config.showMask) {
                    $fadeMask = $('<div class="fade-mask"></div>');
                    $container.append($fadeMask);
                }
                
                // 创建切换按钮
                var $toggleBtn = $container.find('.toggle-btn');
                if ($toggleBtn.length === 0) {
                    $toggleBtn = $('<div class="toggle-btn layui-btn layui-btn-primary layui-border-success">' + config.expandText + '<i class="layui-icon ' + config.expandIcon + '"></i></div>');
                    $container.append($toggleBtn);
                }
                
                // 设置行高
                $content.css('line-height', config.lineHeight);
                
                // 初始化组件
                initComponent($container, $content, $toggleBtn, $fadeMask, config);
                
                // 标记已初始化
                $container.data('rich-text-inited', true);
                $container.data('rich-text-config', config);
            });
        },
        
        /**
         * 重新计算内容高度（用于动态内容）
         * @param {string} selector - 容器选择器
         */
        refresh: function(selector) {
            $(selector).each(function() {
                var $container = $(this);
                if (!$container.data('rich-text-inited')) {
                    return;
                }
                
                var $content = $container.find('.rich-text-content');
                var $toggleBtn = $container.find('.toggle-btn');
                var $fadeMask = $container.find('.fade-mask');
                var config = $container.data('rich-text-config');
                
                checkContentHeight($content, $toggleBtn, $fadeMask, config);
            });
        },
        
        /**
         * 展开所有内容
         * @param {string} selector - 容器选择器
         */
        expandAll: function(selector) {
            $(selector).each(function() {
                var $container = $(this);
                if (!$container.data('rich-text-inited')) {
                    return;
                }
                
                var $content = $container.find('.rich-text-content');
                var $toggleBtn = $container.find('.toggle-btn');
                var $fadeMask = $container.find('.fade-mask');
                var config = $container.data('rich-text-config');
                
                if ($content.hasClass('rich-text-collapsed')) {
                    toggleContent($content, $toggleBtn, $fadeMask, config, true);
                }
            });
        },
        
        /**
         * 收起所有内容
         * @param {string} selector - 容器选择器
         */
        collapseAll: function(selector) {
            $(selector).each(function() {
                var $container = $(this);
                if (!$container.data('rich-text-inited')) {
                    return;
                }
                
                var $content = $container.find('.rich-text-content');
                var $toggleBtn = $container.find('.toggle-btn');
                var $fadeMask = $container.find('.fade-mask');
                var config = $container.data('rich-text-config');
                
                if (!$content.hasClass('rich-text-collapsed')) {
                    toggleContent($content, $toggleBtn, $fadeMask, config, false);
                }
            });
        },
        
        /**
         * 销毁组件
         * @param {string} selector - 容器选择器
         */
        destroy: function(selector) {
            $(selector).each(function() {
                var $container = $(this);
                if (!$container.data('rich-text-inited')) {
                    return;
                }
                
                var $toggleBtn = $container.find('.toggle-btn');
                var $fadeMask = $container.find('.fade-mask');
                
                $toggleBtn.off('click');
                $fadeMask.remove();
                $toggleBtn.remove();
                $container.removeClass('rich-text-container');
                $container.find('.rich-text-content').removeClass('rich-text-collapsed rich-text-expanded');
                
                $container.removeData('rich-text-inited');
                $container.removeData('rich-text-config');
            });
        }
    };
    
    /**
     * 初始化单个组件
     */
    function initComponent($container, $content, $toggleBtn, $fadeMask, config) {
        // 设置初始状态
        $content.addClass('rich-text-collapsed');
        
        // 检查内容高度
        if (config.autoCheck) {
            checkContentHeight($content, $toggleBtn, $fadeMask, config);
        }
        
        // 绑定点击事件
        $toggleBtn.off('click').on('click', function() {
            var isExpanding = $content.hasClass('rich-text-collapsed');
            toggleContent($content, $toggleBtn, $fadeMask, config, isExpanding);
        });
        
        // 监听窗口变化
        $(window).on('resize.richText' + getContainerId($container), function() {
            if (config.autoCheck) {
                checkContentHeight($content, $toggleBtn, $fadeMask, config);
            }
        });
    }
    
    /**
     * 检查内容高度
     */
    function checkContentHeight($content, $toggleBtn, $fadeMask, config) {
        var wasCollapsed = $content.hasClass('rich-text-collapsed');
        
        // 临时展开测量实际高度
        $content.removeClass('rich-text-collapsed');
        var contentHeight = $content[0].scrollHeight;
        var computedStyle = window.getComputedStyle($content[0]);
        var lineHeight = parseFloat(computedStyle.lineHeight) || parseFloat(computedStyle.fontSize) * config.lineHeight;
        var maxCollapsedHeight = lineHeight * config.maxLines;
        
        // 恢复原始状态
        if (wasCollapsed) {
            $content.addClass('rich-text-collapsed');
        }
        
        // 判断是否需要显示按钮
        if (contentHeight <= maxCollapsedHeight + 2) { // 加2像素容差
            $toggleBtn.hide();
            if ($fadeMask.length) $fadeMask.hide();
            $content.removeClass('rich-text-collapsed');
        } else {
            $toggleBtn.show();
            if ($fadeMask.length) $fadeMask.show();
            if (wasCollapsed && $fadeMask.length) {
                $fadeMask.removeClass('hidden');
            }
        }
    }
    
    /**
     * 切换内容展开状态
     */
    function toggleContent($content, $toggleBtn, $fadeMask, config, isExpanding) {
        if (isExpanding) {
            // 展开
            $content.removeClass('rich-text-collapsed').addClass('rich-text-expanded');
            $toggleBtn.html(config.collapseText + '<i class="layui-icon ' + config.collapseIcon + '"></i>');
            if ($fadeMask.length) $fadeMask.addClass('hidden');
            
            // 回调函数
            if (typeof config.onExpand === 'function') {
                config.onExpand($content[0]);
            }
        } else {
            // 收起
            $content.removeClass('rich-text-expanded').addClass('rich-text-collapsed');
            $toggleBtn.html('<i class="layui-icon ' + config.expandIcon + '"></i> ' + config.expandText);
            if ($fadeMask.length) $fadeMask.removeClass('hidden');
            
            // 回调函数
            if (typeof config.onCollapse === 'function') {
                config.onCollapse($content[0]);
            }
        }
    }
    
    /**
     * 获取容器唯一标识
     */
    function getContainerId($container) {
        return $container.attr('id') || 'rich-text-' + Math.random().toString(36).substr(2, 9);
    }
    
    exports('richTextToggle', RichTextToggle);
});